
<template>
  <view class="listLeft">
    <view class="author" v-show="list.username">
      {{ list.username }}
    </view>
    <view class="title" v-show="list.title">
      {{ list.title }}
    </view>
    <view class="box">
      <view class="music">
        {{ list.msg }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "list",
  props: {
    item: {
      type: Array,
      required: true,
    },
    num: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      list: this.item[this.num],
    };
  },
  watch: {
    num() {
      this.list = this.item[this.num];
      console.log(this.list);
    },
  },
};
</script>

<style>
.listLeft {
  height: 150px;
  margin-left: 10px;
  color: #ffffff;
  width: 150px;
}

.author {
  height: 35px;
  line-height: 35px;
  font-size: 17px;
}

.title {
  line-height: 20px;
  font-size: 15px;
  width: 100%;
  word-wrap: break-word;
}
.box {
  width: 100px;
  overflow: hidden;
}
.music {
  height: 35px;
  line-height: 35px;
  font-size: 15px;
  width: 200px;
  animation: music 4s linear 0.2s infinite;
}

@keyframes music {
  0% {
    transform: translate3d(80%, 0, 0);
  }
  100% {
    transform: translate3d(-80%, 0, 0);
  }
}
</style>

